<template>
	<view class="discover">
		<div class="bjImg">
			<uni-nav-bar dark class="popup" color="#fff" backgroundColor="transparent" left-icon="left" title="我的"
				@clickLeft="onClickLeft" :border="false" />
			<div class="content">
				<view class="userInfo">
					<image class="user" src="/static/images/Home/bg.png" mode=""></image>
					<view class="info">
						<view class="flex">
							<text class="name">刘亦菲</text>
							<text class="phone">135******21</text>
						</view>
						<view class="flex">
							<view class="member">
								<image src="/static/images/Discover/icon-king.png" mode="aspectFit"></image>
								10星会员
							</view>
							<view class="niello">
								<image src="/static/images/Discover/vip.png" mode="aspectFit"></image>
								黑金节点
							</view>
						</view>
					</view>
					<view class="rightBtn" @click="unSer == 2 ? service() : goto()">
						<image src="/static/images/Discover/bg.png" mode=""></image>
						<text>锦鲤算力卡</text>
					</view>
				</view>
				<view class="orderCase">
					<view class="item"  @click="OrderList(1)">
						<view class="imgBox">
							<image src="/static/images/Discover/due.png" mode="aspectFit"></image>
						</view>
						<view>待付款</view>
					</view>
					<view class="item"  @click="OrderList(2)">
						<view class="imgBox">
							<image src="/static/images/Discover/stayGoods.png" mode="aspectFit"></image>
						</view>
						<view>待发货</view>
					</view>
					<view class="item"  @click="OrderList(3)">
						<view class="imgBox">
							<image src="/static/images/Discover/paid.png" mode="aspectFit"></image>
						</view>
						<view>已付款</view>
					</view>
					<view class="item"  @click="OrderList(4)">
						<view class="imgBox">
							<image src="/static/images/Discover/verifyGoods.png" mode="aspectFit"></image>
						</view>
						<view>确认收货</view>
					</view>
					<view class="item" @click="OrderList(0)">
						<view class="imgBox">
							<image src="/static/images/Discover/all.png" mode="aspectFit"></image>
						</view>
						<view>全部订单</view>
					</view>
				</view>
			</div>
		</div>
		<view class="secureCase">
			<view class="utils">
				<view class="title">常用功能</view>
				<view class="list">
					<view class="item" @click="toMineEquiment">
						<view class="img">
							<image src="/static/images/Discover/myEquipment.png" mode="aspectFit"></image>
						</view>
						<view>我的设备</view>
					</view>
					<view class="item">
						<view class="img">
							<image src="/static/images/Discover/securityCode.png" mode="aspectFit"></image>
						</view>
						<view>安全密码</view>
					</view>
					<view class="item" @click="newPeople">
						<view class="img">
							<image src="/static/images/Discover/noviceGuide.png" mode="aspectFit"></image>
						</view>
						<view>新手指导</view>
					</view>
					<view class="item" @click="InviteNewPeople">
						<view class="img">
							<image src="/static/images/Discover/InviteFriends.png" mode="aspectFit"></image>
						</view>
						<view>邀请好友</view>
					</view>
					<view class="item">
						<view class="img">
							<image src="/static/images/Discover/whitePaper.png" mode="aspectFit"></image>
						</view>
						<view>白皮书</view>
					</view>
					<view class="item" @click="contactPopup">
						<view class="img">
							<image src="/static/images/Discover/contactUs.png" mode="aspectFit"></image>
						</view>
						<view>联系我们</view>
					</view>
				</view>
			</view>
			<view class="exitLogIn" @click="exitLogIn">退出登录</view>
		</view>
		<!-- 联系我们方式 -->
		<uni-popup ref="contact" type="bottom" class="contactUsPopup" backgroundColor="#222324">
			<view class="title">联系我们
				<image @click='close' src='@/static/images/Home/no.png' class="no"></image>
			</view>
			<view class="line van-hairline--bottom"></view>
			<view class="content">
				<view class="reminder">您有任何问题可以发送至我们邮箱</view>
				<view class="email">
					邮箱地址
					<view class="emailAddress" @click="copy(email)">
						{{ email }}
						<image src="@/static/images/Order/order_copy.png" mode=""></image>
					</view>
				</view>
				<view class="info">
					或者联系 <view class="onlineService">在线客服</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { debounce } from '@/utils/debounce'
	import { getInfo } from '@/api/userInfo'
	import { copy } from "@/utils/copy";
	import { onShow } from "@dcloudio/uni-app";
	const contact = ref('')
	const user = ref('普通用户')
	const showBottom = ref(false);
	const email = ref("koi666@gmail.com")
	const unSer = ref()
	onShow(async () => {
		var { data } = await getInfo()
		unSer.value = data.unSer
		console.log(data)
	})
	const goto = () => {
		uni.navigateTo({
			url: '/mineCommonFunSub/intoProvider/index'
		})
	}
	/**
	 * 是否显示联系方式弹出层
	 */
	const contactPopup = () => {
		console.log(contact.value)
		contact.value.open('bottom')
	}
	/**
	 * 是否退出登入
	 */
	const exitLogIn = debounce(() => {
		uni.navigateTo({
			url: "/pages/login/index",
		})
	}, 300)

	/**
	 * 新人引导
	 */
	const newPeople = () => {
		uni.navigateTo({
			url: '/mineCommonFunSub/noviceGuide/index'
		})
	}

	/**
	 * 邀请好友
	 */
	const InviteNewPeople = () => {
		uni.navigateTo({
			url: '/mineCommonFunSub/InviteNewPeople/index'
		})
	}

	const close = () => {
		contact.value.close()
	}
	const onClickLeft = () => history.back();

	const onClickRight = (e) => {
		if (user.value === '锦鲤服务商') {
			user.value = '普通用户'
			uni.navigateTo({
				url: '/mineCommonFunSub/userOrService/index'
			})
		} else {
			user.value = '锦鲤服务商'
		}
	}

	const toMineEquiment = () => {
		uni.navigateTo({
			url: "/mineCommonFunSub/myEquipment/index",
		});
	};
	const OrderList = (val) => {
		uni.navigateTo({
			url: '/subdue/orderList/index?num=' + val,
		})
	}
	const service = () => {
		uni.navigateTo({
			url: "/service/Content/index",
		});
	}
</script>

<style scoped lang="scss">
	.uni-popup__wrapper {
		overflow: hidden;
	}

	::v-deep .uni-nav-bar-text {
		font-size: 32px;
	}

	.discover {
		--van-nav-bar-title-font-size: 36px;
		--van-nav-bar-title-text-color: white;
		--van-nav-bar-height: 88px;
		--van-nav-bar-arrow-size: 36px;
		--van-nav-bar-icon-color: white;
		--van-nav-bar-background: transparent;

		::v-deep.van-ellipsis {
			overflow: visible !important;
		}

		::v-deep.van-nav-bar__left {
			left: 6px;
		}

		.bjImg {
			height: 436px;
			background: url("../../static/images/Discover/top-bg.png");
			background-size: 100% 100%;
			--van-nav-bar-text-color: white;

			::v-deep.van-nav-bar__right {
				font-size: 24px;
			}

			.content {
				padding: 36px 32px;
				box-sizing: border-box;

				// 人物信息
				.userInfo {
					display: flex;
					align-items: center;
					position: relative;

					.user {
						width: 120px;
						height: 120px;
						border-radius: 50%
					}

					.info {
						margin-left: 24px;
						color: white;

						.flex {
							display: flex;
							align-items: center;
							margin: 6px 0;

							.name {
								margin-right: 8px;
								font-size: 40px;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								color: #ffffff;
								line-height: 56px;
								letter-spacing: 1px;
							}

							.phone {
								font-size: 26px;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #ffffff;
								line-height: 37px;
							}

							.member {
								display: flex;
								aliogn-items: center;
								font-size: 22px;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #ffffff;
								line-height: 30px;

								image {
									width: 36px;
									height: 28px;
								}
							}

							.niello {
								display: flex;
								aliogn-items: center;
								font-size: 22px;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #ffffff;
								line-height: 30px;

								image {
									width: 36px;
									height: 28px;
								}
							}
						}
					}

					.rightBtn {
						position: absolute;
						top: -110px;
						right: -32px;
						width: 188px;
						height: 58px;
						font-size: 24px;
						z-index: 222;
						font-weight: 700;
						font-family: HYk2gj;
						color: #f6c6c9;
						line-height: 24px;
						text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.39);
						z-index: 999;

						image {
							width: 100%;
							height: 100%;
						}

						text {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 120px;
							height: 26px;
							font-size: 24px;
							font-weight: 900;
							font-family: HYk2gj;
							background: linear-gradient(to right, #fff9ef, #5c4b36);
							-webkit-background-clip: text;
							background-clip: text;
							color: transparent;
						}
					}
				}

				// 服务内容
				.orderCase {
					position: relative;
					top: 80px;
					display: flex;
					align-items: center;
					justify-content: space-around;
					height: 172px;
					background: #2a2b2e;
					border-radius: 16px;

					&::after {
						content: "";
						width: 16px;
						height: 97px;
						background: url("../../static/images/Discover/arrow.png");
						background-size: 100% 100%;
						position: absolute;
						top: 50%;
						right: 140px;
						transform: translate(-50%, -50%);
					}

					.item {
						text-align: center;
						color: white;
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						line-height: 33px;
						overflow: hidden;

						.imgBox {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 70px;

							image {
								width: 46px;
							}
						}
					}
				}
			}
		}

		// 常用功能
		.utils {
			height: 442px;
			margin-top: 64px;
			background: #2a2b2e;
			border-radius: 16px;
			box-sizing: border-box;

			.title {
				font-size: 36px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #ffffff;
				line-height: 50px;
				letter-spacing: 1px;
				padding: 32px 30px 0px;
			}

			.list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 25%;
					height: 172px;
					text-align: center;
					color: white;
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					line-height: 33px;

					.img {
						display: flex;
						align-items: center;
						height: 84px;

						image {
							width: 64px;
						}
					}

					view {
						margin-top: 20px;
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #ffffff;
						line-height: 33px;
					}
				}
			}
		}

		// 退出登入
		.exitLogIn {
			width: 327px;
			height: 88px;
			margin: 347px auto 0;
			border-radius: 16px;
			border: 1px solid #ffffff;
			text-align: center;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 88px;
			letter-spacing: 1px;
		}

		.contactUsPopup {
			border-radius: 36px 36px 0 0;
			color: white;

			.title {
				position: relative;
				left: -1px;
				width: 100vw;
				border: 1px solid rgba(216, 216, 216, 1);
				border-bottom-width: 0px;
				height: 96px;
				font-size: 40px;
				text-align: center;
				padding-left: 1px;
				padding-right: 1px;
				line-height: 96px;
				border-top-right-radius: 56px;
				border-top-left-radius: 56px;

				.no {
					width: 72px;
					height: 72px;
					position: absolute;
					top: 14px;
					right: 34px;
				}
			}

			.line {
				width: 90%;
				margin: 0 auto;
			}

			.content {
				padding: 141px 138px;

				>view {
					margin-bottom: 40px;
				}

				.reminder {
					font-size: 28px;
				}

				.email {
					display: flex;
					align-items: center;
					font-size: 30px;

					.emailAddress {
						display: flex;
						align-items: center;
						padding: 10px;
						border-radius: 10px;
						margin-left: 10px;
						border: 1px solid white;

						image {
							width: 30px;
							height: 30px;
							margin-left: 5px;
						}
					}
				}

				.info {
					display: flex;
					align-items: center;
					font-size: 30px;

					.onlineService {
						display: flex;
						align-items: center;
						padding: 10px;
						border-radius: 16px;
						margin-left: 10px;
						border: 1px solid white;
					}
				}
			}
		}
	}
</style>